<template>
		<scroll-view refresher-background="#F5F5F5" :scroll-y='scrollY' @scrolltolower="nextPage" @refresherrefresh="refresh" refresher-enabled :refresher-triggered='downPull' class="info-list">
			<view v-for="(item,index) in data" :key="index" class="list-item">
				<!-- 堂食订单 start -->
				<block v-if="orderType == 1">
					<view @click="go({t:1,url:'/yb_shd/dp/OrderDine/order-info?id=' + item.id})">
						<view class="f-x-bt">
							<view>
								<text class="f46 wei">{{item.number}}</text>
							</view>
							<view>
								<text class="f28 wei mr10">{{item.stateName}}</text>
								|
								<text v-if="item.eatType == 1" class="f28 wei ml10" style="color:#49C265 ;" >已支付</text>
								<text v-else-if="item.eatType == 2 && item.stateName === '就餐中'" class="f28 wei ml10" style="color:#F56C6C ;" >未支付</text>
							</view>
						</view>
						<view class="f-y-bt b-b-d-f5 pb20">
							<text class="f24">就餐人数：{{item.people}}</text>
							<text class="f24 c3">开台时间： {{item.createdAt}}</text>
						</view>
						<view class="mt20">
							<view class="f-bt f28">
									<text>{{item.goodsName}} 等{{item.goodsNum}}件商品</text>
									<text>应付金额：<text class="wei">{{item.money}}元</text></text>
							</view>
						</view>
					</view>
					<view class="f-x-e mt40">
						<view class=" f-bt btn f22 wei">
							<view style="color: #999;border-color: #999;"  @click="changeOrder(item.id,'print')">打印小票</view>
							<view v-if="item.eatType == 2" style="color: #49C265;border-color: #49C265;" @click="changeOrder(item.id,'')">结账并清台</view>
						<!-- 	<view v-if="item.state == 2" style="color: #49C265;border-color: #49C265;" @click="changeOrder(item.id,'receipt')">接单</view>
							<view v-if="item.state == 2" style="color: #F56C6C;border-color: #F56C6C;" @click="changeOrder(item.id,'rejection')">拒单并退款</view>
							<view v-if="item.state != 4 && item.state != 2" style="color: #49C265;border-color: #49C265;" @click="changeOrder(item.id,'confirm')">完成</view> -->
						</view>
						
					</view>
				</block>
				<!-- 堂食订单 end -->
				<!-- 快餐订单 start-->
				<block v-else-if="orderType == 2">
					<view @click="go({t:1,url:'/yb_shd/dp/OrderDine/order-info?id=' + item.id})">
						<view class="f-x-bt">
							<view>
								<text  class="f46 wei">{{item.callNo}}</text>
							</view>
							<view>
								<text v-if="item.stateName==='已完成'" class="f28 wei mr10" style="color:#999;">{{item.stateName}}</text>
								<text v-else-if="item.state== 2 || item.state== 9 || item.state== 7 " class="f28 wei mr10" style="color:#F56C6C;">{{item.stateName}}</text>
								<text v-else class="f28 wei mr10">{{item.stateName}}</text>
								|
								<text class="f28 wei ml10" :style="{color:item.isOut == 1? '' : '#49C265'}">{{item.isOut == 1?'店内就餐':'打包带走'}}</text>
							</view>
						</view>
						<view class="f-y-bt b-b-d-f5 pb20">
							<text class="f24">订单号：{{item.outTradeNo}}</text>
							<text class="f24 c3">支付时间： {{item.payAt}}</text>
						</view>
						<view class="mt20">
							<view class="f-bt f28">
									<text>{{item.goodsName}} 等{{item.goodsNum}}件商品</text>
									<text>实付金额：<text class="wei">{{item.money}}元</text></text>
							</view>
						</view>
					</view>
					<view class="f-x-e mt40">
						<view class=" f-bt btn f22 wei">
							<!-- <view style="color: #999;border-color: #999;">打印小票</view> -->
							<view v-if="item.state == 2" style="color: #49C265;border-color: #49C265;" @click="changeOrder(item.id,'receipt')">接单</view>
							<view v-if="item.state == 2" style="color: #F56C6C;border-color: #F56C6C;" @click="changeOrder(item.id,'rejection')">拒单并退款</view>
							<view v-if="item.state != 4 && item.state != 2" style="color: #FE9367;border-color: #FE9367;" @click="changeOrder(item.id,'call')">取餐并叫号</view>
							<view v-if="item.state != 4 && item.state != 2" style="color: #49C265;border-color: #49C265;" @click="changeOrder(item.id,'confirm')">完成</view>
						</view>
						
					</view>
				</block>
				<!-- 快餐订单 end-->
			</view>
			<!-- 空布局 -->
			<mescroll-empty v-if="data.length === 0"></mescroll-empty>
		</scroll-view>
	
</template>

<script>
	import MescrollEmpty from '@/mescroll-uni/components/mescroll-empty.vue';
	import utils from '@/common/utils.js'
	export default {
		components: {
			MescrollEmpty
		},
		props:{
			scrollY: {
				type: Boolean,
				default: false
			},
			data: {
				type: Array,
				default:function(){return []}
			},
			orderType:{
				type: [String,Number],
				default:'1'
			},
			downPull:{
				type: Boolean,
				default: false
			}
		},
		data(){
			return{}
		},
		methods:{
			refresh:utils.throttle(function(e) {
				// APP上downPull为true会触发@refresherrefresh 导致数据两份数据
				if(this.downPull){
					return
				}
				this.$emit('refresh')
			},300),
			nextPage:utils.throttle(function(e) {
				this.$emit('nextPage')
			},300),
			changeOrder(id,type){
				var text = ""
				var param = {
					orderId:id,
					type:type,
					printType:Number(this.orderType) == 1 ? 2 : 3
				}
				switch(param.type){
					
					case 'call':
						text = '您确认要提醒用户取餐并叫号吗？'
						break;
					case 'confirm':
						text = '您确认要完成此订单吗？'
						break;
					case 'receipt':
						text = '您确认要接单吗？'
						break;
					case 'rejection':
						text = '您确认要拒绝此订单吗？'
						break;
					case 'print':
						text = '您确认要打印小票吗？'
						break;
				}
				this.util.modal(text).then(async res=>{
					try{
						let {msg} = await this.util.request({
							'url': this.api.modifyFastOrder,
							method:"post",
							data:param
						})
						this.util.message(msg, 3, 2000)
						this.$emit('refresh')
					}catch(e){
						this.util.message(e.msg, 3, 2000)
					}
					
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.info-list{
		height: calc(100vh - 164rpx); //或者通过js 获取元素属性的形式进行高度计算
		padding-top: 20rpx;
		background: #F5F5F5;
	}
	.list-item{
		width: 700rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
	}
	.btn view{
		width: 150rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border: 2rpx solid #000;
		border-radius: 50rpx;
		margin-left: 10rpx;
	}
	.tag{
		padding: 10rpx 20rpx;
		background: #FEF5E4;
		color: #E4AD56;
	}
</style>
